<template>
	<van-popup
		class="modal-white"
		v-model:show="show"
		teleport="body"
		position="bottom"
		:style="{ height: '4.4rem' }"
		@closed="close"
		round
	>
		<div class="modal-header">
			<div class="title">{{ $t("Please fill in") }}</div>
			<div class="close" @click="close"></div>
		</div>
		<div
			class="modal-container"
			:style="{ paddingBottom: vueState.pageStyle.tabBarHeight + 'px' }"
		>
			<div>
				<yowin-input
					class="input"
					v-model:input="field.email.model"
					v-model:state="field.email.state"
					:placeholder="`Receive's Email Address`"
					:valid="validEmail"
					:clear="true"
				></yowin-input>
				<yowin-input
					class="input"
					v-model:input="field.name.model"
					v-model:state="field.name.state"
					:placeholder="`Receive's Name`"
					:valid="validName"
					:clear="true"
				></yowin-input>
				<yowin-input
					class="input"
					v-model:input="field.phone.model"
					v-model:state="field.phone.state"
					:placeholder="$t('Phone Number')"
					:maxLength="20"
					:valid="validPhoneNumber"
					:successInfo="$t(successInfo)"
					:errorInfo="$t(errorInfo)"
					:clear="true"
				></yowin-input>
			</div>
			<div :class="['button', { unactive: !status }]" @click="submit">
				{{ $t("Submit") }}
			</div>
		</div>
	</van-popup>
</template>
<script>
import { reactive, toRefs, computed, inject, watch } from "vue";
import { internationalConfig } from "@@/i18n/config.js";
import { validEmail } from "@@/utils/common.js";
import YowinInput from "../Input/index.vue";

export default {
	components: {
		YowinInput,
	},
	props: ["show"],
	setup(props, ctx) {
		const vueState = inject("vueState");
		const state = reactive({
			successInfo: "Success! Number is available!",
			errorInfo: "Error! Number is not available!",
			field: {
				email: {
					model: "",
					state: false,
				},
				name: {
					model: "",
					state: false,
				},
				phone: {
					model: "",
					state: false,
				},
			},
		});
		const status = computed(() => {
			let flag = true;
			for (let key in state.field) {
				flag = flag && state.field[key].state;
			}
			return flag;
		});
		const close = () => {
			ctx.emit("update:show", false);
		};
		const submit = () => {
			ctx.emit("submit", state.field);
		};
		const validPhoneNumber = (val) => {
			const reg =
				internationalConfig.phoneReg[vueState.countryInfo.country] ||
				/^[0-9]*[1-9][0-9]*$/;
			return reg.test(val);
		};
		const validName = (val) => {
			return Boolean(val);
		};
		watch(
			() => vueState.pageStatus.infoAvailable,
			(newVal) => {
				if (newVal) {
					state.field.phone.model = vueState.pageInfo.mobile;
				}
			}
		);
		return {
			...toRefs(state),
			close,
			submit,
			validName,
			validPhoneNumber,
			vueState,
			status,
			validEmail,
		};
	},
};
</script>
<style lang="less" scoped>
.tee {
	height: 0.2rem;
	width: 0.3rem;
	background-color: red;
}
.modal {
	&-white {
		padding-bottom: 0.5rem;
	}
	&-header {
		padding: 0.16rem 0.16rem 0.04rem 0.2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title {
			font-size: 0.16rem;
			font-weight: 500;
			color: black;
			line-height: 0.28rem;
		}
		.close {
			height: 0.24rem;
			width: 0.24rem;
			background: url(../../assets/images/Modal/modal_close_green.png)
				no-repeat center;
			background-size: contain;
		}
	}
	&-container {
		padding: 0.2rem 0.24rem 0;
		height: calc(100% - 0.48rem);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.input {
			margin-top: 0.2rem;
			&:first-child {
				margin-top: 0;
			}
		}
		.button {
			.unique-button();
			width: 100%;
			margin-bottom: 0.32rem;
			height: 0.46rem;
			font-size: 0.16rem;
			flex-shrink: 0;
			&.unactive {
				opacity: 0.5;
			}
		}
	}
}
</style>